<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <meta name="wechat-enable-text-zoom-em" content="true">
    <title>运费查询结果</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/example.css">

    <script type="text/javascript" src="js/map.js"></script>

    <style>
        .weui-form{
            background: #cecece;
        }
        .weui-cells{
            background: #fff;
            color: #000;
        }
        .weui-cells div{
            color: #000;
            font-size: 12px;
            margin-left: 0px !important;
margin-right: 0px !important;

        }
        .weui-cell_select .weui-cell__bd::after{
            color: hsla(0, 0%, 0%, 0.52) !important;
        }
        .weui-cell.weui-cell_active.weui-cell_select{
            height: 44px;
        }
        .weui-form__control-area{
            margin-top: 0px;
        }
        .weui-form{
            padding-top: 0px;
        }
    </style>

    <style>
    .pro_type_grid .pro_item{
        width: calc(50% - .21rem * 2);
    }
    .header-search-txt{
        padding-left: 24px;
padding-right: 10px;
        width: 100%;
        background: #dddcdc;
       /* margin-left: 10px;
        margin-right: 10px;*/
        height: 25px;
        border-radius: 50px;
    }
    .page-header-background.header-title{
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        line-height: 44px;
    }
    .pro_item .cover .photo{
        height:30px !important
    }
    .pro_item .cover{
        text-align: center;
    }
    .pro_item .item_inner{
        display: grid;
        grid-template-rows: auto auto;
        margin-bottom: 5px;
        background: #fff;
        padding-top: 15px;
        padding-bottom: 15px;
        height: 55px;
    }
    .pro_item div{
        text-align: center;
        font-size: 13px;
    }
    body{
        background: #eee;
        height: 100%;
    }
    .pro_item{
        display: grid;
grid-template-columns: auto auto;
grid-column-gap: 5px;
    }
    .page-header-background.header-title{
        background: #40af41;
    }
    .p1{
        padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
background: #fff;
padding-top: 6px;
margin-top: -6px;
    }
    .p2{
        margin-left: 10px;
margin-right: 10px;
font-size: 10px;
text-align: center;
margin-bottom: 10px;

    }
    .c1{
        color: #888;
    }
    .d3{
        margin-bottom: 10px;
margin-top: 10px;
    }
    .d4{
        text-align: center;
        margin-bottom: 30px;
        position: fixed;
bottom: 10px;
width: 100%;
    }
    .but-lx{
    border: none;
width: 70%;
background: #f08818;
color: #fff;
line-height: 30px;
  border-radius: 50px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #40af41 !important;
}
.swiper-pagination-bullet{
    width: 5px !important;
height: 5px !important;
border-radius: 50px !important;
background: #888 !important;
}
.fb.fb-user{
    background-image: url(../images/user2.png) !important;
    background-position: 0 0 !important;
}
.fb.fb-home{
    background-image: url(../images/home2.png) !important;
    background-position: 0 0 !important;
}
.nav-controller{
    color:#888 !important
}
.nav-controller.active{
    color:#40af41 !important
}
.weui-cell-bor {
    border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #cecece;
}
.b-d1{
    padding-left: 10px;
    padding-right: 10px;
    grid-column-gap: 10px;
    display: grid;
grid-template-columns: 5px auto;
}
.b-d1-1{
    background: #40af41;
}
.b-r-1{
    display: grid;
grid-template-rows: 14px auto 14px;
height: 44px;
    line-height: 16px;
}
.page.home .weui-cell {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.weui-select {
    padding-left: 0px !important;
    
/*    padding-right: 0px !important;*/
}
.weui-select.p{
    text-align: right;
}
.weui-cell__hd,.weui-cell__hd{
padding-left: 0px !important;
}
.weui-input::placeholder{
color:#000 !important;
text-align: right;
}
.b-r-20{
    padding-right: 30px;
}
.weui-input {
    text-align: right;
}
.weui-cell__bd .weui-select{
    text-align: right;
}
.weui-cell-bor{
    background: #fff;
}

.hei1{
    height: 10px;
    background: #cecece;
    width: 100%;
}
.hei2{
    height: 44px;
    line-height: 44px;
    width: 100%;
    text-align: center;
}
.hei2-1{
    height: 44px;
    line-height: 44px;
    width: 100%;
}
body{
    background: #cecece;
    font-size: 12px;
}
.lr10{
    padding-left: 10px;
padding-right: 10px;
display: grid;
grid-template-columns: auto 45px;
height: 44px;
background: #fff;
}
.a{
display: grid;
grid-template-rows: auto 20px auto;
}
.b{
    text-align: center;
    border-left-width: 1px;
border-left-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-right-width: 1px;
border-right-style: solid;
border-radius: 50px;
border-color: #ff3000bd;
color: #ff3000bd;
font-size: 10px;
}
.lr20{
    display: grid;
grid-template-columns: 20px auto auto;
height: 44px;   padding-left: 10px;
padding-right: 10px;
grid-column-gap: 6px;background: #fff;
}
.gj{
    display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 5px;
text-align: center;
}
.gj .active{
    background: #f7ae00ed;
color: #fff;
font-size: 10px;
line-height: 30px;
border-radius: 3px;
}
.gj{
    font-size: 10px;
line-height: 30px;
border-radius: 3px;
}

.gjk{
    border-left-width: 1px;
border-left-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-right-width: 1px;
border-right-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #cecece;border-radius: 3px;
}
.gd-3{
    display: grid;
    grid-template-columns: auto 20px auto;
    text-align: center;
    background: #fff;
    padding-top: 10px;
padding-bottom: 10px;margin-bottom: 10px;
}
.gd-3 h2{
    font-weight: bold;

}
.bgd-10{
    width: 100%;
    height: 150px;
}


#container{
    height: 100%;
width: auto;

}

.BMap_cpyCtrl.anchorBL span,.anchorBL img{
    display: none !important;
}

.page-header-background.header-title{
    position: fixed;
top: 0px;
width: 100%;
z-index: 999;
}
#vue-main{
    margin-top: 44px;
}


</style>


<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<script  src="js/_config.json"></script>

</head>
<body ontouchstart>






<div id="vue-main" v-cloak>
        
        <div class="page-header-background header-title">
            <a href="javascript:;" onclick="window.location.href=history.back(-1)"><div style="position: absolute;padding-top: 5px;padding-left: 5px;"><img style="height: 20px;" src="images/return.png"></div></a>
            <div>运费查询结果</div>
        </div>

 

<div class="bgd-10">
    <div  id="container"></div> 
</div>


<div style="height: 10px ; background: #cecece;width: 100%;">&nbsp;</div>

<div class="gd-3" style="margin-left: 10px;margin-right: 10px;">
    <div>
        <h2 >{{t_s}}</h2>
        <div>{{t_c}} {{t_q}}</div>
    </div>
    <div style="margin-top: 14px;"><img style="height:20px;width:20px" src="images/jt.png"></div>
    <div>
        <h2 >{{d_s}}</h2>
        <div>{{d_c}} {{d_q}}</div>
    </div>
</div>



<div style="height: 1px ; background: #cecece;width: 100%;">&nbsp;</div>
<div class="b-r-1 weui-cell-bor" style="margin-left: 10px;
margin-right: 10px;">
    <div></div>
    <div class="b-d1" style="grid-template-columns: 5px auto auto;">
        <div class="b-d1-1" style="background: #e23896;"></div>
        <div>运费查询结果</div>
        <div style="text-align: right;color: #f97806;font-weight: bold;"></div>
    </div>
    <div></div>
</div>
<div class="lr20" style="margin-left: 10px;
margin-right: 10px;">
    <div class="a">
        <div></div>
        <div><img style="height:20px" src="images/tag.png"></div>
        <div></div>
    </div>
    <div class="a">
        <div></div>
        <div >运费</div>
        <div></div>
    </div>
    <div class="a" style="text-align: center;">
        <div></div>
        <div style="border-radius: 50px;;font-size: 10px;line-height: 20px;;grid-template-columns: auto auto;text-align: right;">
            <span style="background: #b5b5b5;padding-top: 3px;padding-bottom: 3px;padding-right: 7px;border-radius: 50px;padding-left: 7px;">¥{{list.money-list.chwchaozhong}}</span>
           
        </div>
        <div></div>
    </div>
</div>
<div style="height: 1px ; background: #cecece;width: 100%;">&nbsp;</div>
<div class="lr20" style="margin-left: 10px;
margin-right: 10px;">
    <div class="a">
        <div></div>
        <div><img style="height:20px" src="images/tag.png"></div>
        <div></div>
    </div>
    <div class="a">
        <div></div>
        <div >超重费</div>
        <div></div>
    </div>
    <div class="a" style="text-align: center;">
        <div></div>
        <div style="border-radius: 50px;;font-size: 10px;line-height: 20px;;grid-template-columns: auto auto;text-align: right;">
            <span style="background: #b5b5b5;padding-top: 3px;padding-bottom: 3px;padding-right: 7px;border-radius: 50px;padding-left: 7px;">¥{{list.chwchaozhong?list.chwchaozhong:0}}</span>
           
        </div>
        <div></div>
    </div>
</div>
<div style="height: 1px ; background: #cecece;width: 100%;">&nbsp;</div>
<div class="lr20" style="margin-left: 10px;
margin-right: 10px;">
    <div class="a">
        <div></div>
        <div><img style="height:20px" src="images/tag.png"></div>
        <div></div>
    </div>
    <div class="a">
        <div></div>
        <div >总计</div>
        <div></div>
    </div>
    <div class="a" style="text-align: center;">
        <div></div>
        <div style="border-radius: 50px;;font-size: 10px;line-height: 20px;;grid-template-columns: auto auto;text-align: right;">
            <span style="padding-top: 3px;padding-bottom: 3px;font-size: 20px;color: #f97806;">¥{{list.money}}</span>
           
        </div>
        <div></div>
    </div>
</div>





    <div class="" style="text-align: center;line-height: 30px;font-size: 12px;padding-left: 10px;padding-right: 10px;margin-top: 20px;">
        <a href="javascript:;" role="button" @click="load()" id="showToast" class="">
            <div style="color:#fff;width: 100%;background: #40af41;border-radius: 50px;">
                立即下单
            </div>
        </a>
    </div>

    <div role="alert" id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast__wrp">
          <div class="weui-toast">
              <i class="weui-icon-success-no-circle weui-icon_toast"></i>
              <p class="weui-toast__content">已完成</p>
          </div>
        </div>
    </div>



</div>






<script>
    var vm = new Vue({
        el: '#vue-main',
        data() {
            return {
                t_s:"",
                t_c:"",
                t_q:"",
                d_s:"",
                d_c:"",
                d_q:"",
                id: 0,
                list:[]
            }
        },
        created(){
            let url=window.location.search;
            let urlParams = new URLSearchParams(url);
            this.id = urlParams.get("id");
           // if(this.url==0){
           //     url=window.location.href;
           //    // window.location.href=url;
           // }
            this.t_s=localStorage.getItem("t_s");
            this.t_c=localStorage.getItem("t_c");
            this.t_q=localStorage.getItem("t_q");
            this.d_s=localStorage.getItem("d_s");
            this.d_c=localStorage.getItem("d_c");
            this.d_q=localStorage.getItem("d_q");
            this.fei();
        },
        mounted(){
            
            this.dd();

        },
        methods: {
            dd:function(){
                var latitude=localStorage.getItem("latitude");
                var longitude=localStorage.getItem("longitude");

                var map = new BMapGL.Map("container");
                var point = new BMapGL.Point(longitude, latitude);
                map.centerAndZoom(point, 15); 
            },
            load:function(){
                var $toast = $('#toast');
                var ids=this.id;
                // $('#showToast').on('click', function(){
                if ($toast.css('display') != 'none') return;

                this.$http.post(siteConfig.BaseUrl+'/h5/api/?url=status',{
                        id:this.id
                },{emulateJSON: true}).then(function(res){
                    $toast.fadeIn(100);
                    setTimeout(function () {
                        $toast.fadeOut(100);
                        window.location.href="order.html?id="+ids;
                    }, 500);
                },function(){
                    console.log("request fail");
                })
                
                // });
            },
            fei:function(){
                this.$http.post(siteConfig.BaseUrl+'/h5/api/?url=more',{
                    id:this.id
                },{emulateJSON: true}).then(function(res){
                    this.list=res.body.data;
                },function(){
                    console.log("request fail");
                })
            }
        }
    })
    
</script>



        <!-- <script src="https://weui.io/zepto.min.js"></script>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.17/weui.min.js"></script>
        <script src="https://weui.io/example.js"></script>
        <script src="https://weui.io/wah.js"></script> -->

        <script src="js/zepto.min.js"></script>
        <script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
        <script src="js/weui.min.js"></script>
        <!-- <script src="js/example.js"></script> -->
        <script src="js/wah.js"></script>
        
        <script type="text/javascript"></script>
        <script type="text/javascript">function wxReady(e){"object"==typeof WeixinJSBridge&&"function"==typeof window.WeixinJSBridge.invoke?e():document.addEventListener("WeixinJSBridgeReady",e,!1)}wxReady(function(){WeixinJSBridge.invoke("getUserConfig",{},function(e){e.isCareMode&&document.body.setAttribute("data-weui-mode","care")})})</script>
    </body>
</html>